
function resetToggleForm() {
    $('#toggle-guideline').val('none');
    $('#toggle-form').find('.guideline-control').slideUp();
}

$(function() {
    
    // validation rules
    var rules = {};
    rules['label']                          = set_rules('label', 'label', 'required|maxlength[6]');
    rules['label-text']                     = set_rules('label-text', 'label-text', 'required|maxlength[25]');
    rules['bold-label']                     = set_rules('bold-label', 'bold-label', 'maxlength[25]');
    rules['name']                           = set_rules('name', 'name', 'required|maxlength[50]');
    rules['id']                             = set_rules('id', 'id', 'required|maxlength[50]');
    rules['initial-value']                  = set_rules('initial-value', 'initial-value', 'maxlength[255]');
    rules['type']                           = set_rules('type', 'type', 'maxlength[25]');
    rules['spinner']                        = set_rules('spinner', 'spinner', 'required|maxlength[25]');
    rules['spinner-step']                   = set_rules('spinner-step', 'spinner-step', 'numeric|maxlength[11]');
    rules['on-text']                        = set_rules('on-text', 'on-text', 'required|maxlength[25]');
    rules['off-text']                       = set_rules('off-text', 'off-text', 'required|maxlength[25]');
    rules['show-list']                      = set_rules('show-list', 'show-list', 'maxlength[25]');
    rules['searchable']                     = set_rules('searchable', 'searchable', 'maxlength[25]');
    rules['show-api']                       = set_rules('show-api', 'show-api', 'maxlength[25]');
    rules['guideline']                      = set_rules('guideline', 'guideline', 'required|maxlength[50]');
    rules['guideline-title']                = set_rules('guideline-title', 'guideline-title', 'required|maxlength[50]');
    rules['guideline-text']                 = set_rules('guideline-text', 'guideline-text', 'required|maxlength[255]');
    rules['horizontal-size']                = set_rules('horizontal-size', 'horizontal-size', 'required|maxlength[25]');
    rules['position']                       = set_rules('position', 'position', 'required|maxlength[25]');

    // fieldset form validation
    $("#toggle-form").validate({
        errorElement: 'small',
        errorClass: 'help-block',
        rules: rules,
        errorPlacement:function(error, element) {
            element.parents('.input-size').append( '<div class="clear-fix"></div>' );
            element.parents('.input-size').append( error);
        },
        highlight: function(label) {
            $(label).closest('.form-group').removeClass('has-error has-success').addClass('has-error');
        },
        success: function(label) {
            label.addClass('valid').closest('.form-group').removeClass('has-error has-success').addClass('has-success');
        }
    });
    
    resetToggleForm();
    
    // show/hide label controls
    $('#toggle-label').change(function() {
        if( $(this).val() === 'none' ) {
            $('#toggle-form').find('.label-control').slideUp();
        } else {
            $('#toggle-form').find('.label-control').slideDown();
        }
    });
    
    // auto fill-up toggle name and id using label text
    $('#toggle-label-text').change(function() {
        var textLabel = $(this).val().toLowerCase().replace(/ /g,'-');
        ( $('#toggle-name').val() === '' || $('#toggle-name').val() === undefined ) ? $('#toggle-name').val(textLabel) : '';
        ( $('#toggle-id').val() === '' || $('#toggle-id').val() === undefined ) ? $('#toggle-id').val(textLabel) : '';
    });
    
    // auto fill-up toggle id using name
    $('#toggle-name').change(function() {
        if( $('#toggle-label').val() === 'none' ) {
            var textLabel = $(this).val().toLowerCase().replace(/ /g,'-');
            ( $('#toggle-id').val() === '' || $('#toggle-id').val() === undefined ) ? $('#toggle-id').val(textLabel) : '';
        }
    });
    
    // show/hide guideline controls
    $('#toggle-guideline').change(function() {
        if( $(this).val() === 'none' ) {
            $('#toggle-form').find('.guideline-control').slideUp();
        } else if(  $(this).val() === 'label' ) {
            $('#toggle-form').find('.guideline-control').slideDown();
            $('#toggle-guideline-title-container').slideUp();
        } else {
            $('#toggle-form').find('.guideline-control').slideDown();
        }
    });

    $('#toggle-save-btn').click(function(event) {
        event.preventDefault();
        $('#toggle-form').submit(function() {
            // always return false, we are not submitting to the server
            return false;
        });
        
        if( $('#toggle-form').valid()) {

            var values = $('#toggle-form').serializeJSON();
            
            // label
            var label                   = ( values['label'] !== undefined && values['label'] !== '' ) ? values['label'] : '';
            var labelPosition           = ( label !== '' || label !== 'none' ) ? ' align-' + label : 'none';
            var labelText               = ( values['label-text'] !== undefined && values['label-text'] !== '' ) ? values['label-text'] : '';
            
            // field data
            var fieldName               = ( values['name'] !== undefined && values['name'] !== '' ) ? values['name'] : '';
            var fieldId                 = ( values['id'] !== undefined && values['id'] !== '' ) ? values['id'] : '';
            var initialValue            = ( values['initial-value'] !== undefined && values['initial-value'] !== '' ) ? ' value="' + values['initial-value'] + '"' : '';
            var useSwitch               = ( values['switch'] !== undefined && values['switch'] !== '' ) ? true : false;
            
            // on and off text
            var onText                  = ( values['on-text'] !== undefined && values['on-text'] !== '') ? ' data-on-text="' +values['on-text']+ '"' : ' data-on-text="ON"';
            var offText                 = ( values['off-text'] !== undefined && values['off-text'] !== '') ? ' data-off-text="' +values['off-text']+ '"' : ' data-off-text="OFF"';
            
            // guideline
            var guideline               = ( values['guideline'] !== undefined && values['guideline'] !== '' ) ? values['guideline'] : '';
            var guidelineTitle          = ( values['guideline-title'] !== undefined && values['guideline-title'] !== '' ) ? values['guideline-title'] : '';
            var guidelineText           = ( values['guideline-text'] !== undefined && values['guideline-text'] !== '' ) ? values['guideline-text'] : '';
            
            // size and position
            var horizontalSize          = ( values['horizontal-size'] !== undefined && values['horizontal-size'] !== '' ) ? ' ' + values['horizontal-size'] : '';
            var verticalSize            = ( values['vertical-size'] !== undefined && values['vertical-size'] !== '' )? ' ' + values['vertical-size'] : '';
            var position                = ( values['position'] !== undefined && values['position'] !== '' ) ? ' ' + values['position'] : '';

            var markup = '';
            var list = $('<li class="form-group row"></li>');
            markup += '<button type="button" class="close" aria-hidden="true">&times;</button>\n';
            markup += '<label for="' +fieldId+ '" class="control-label' +labelPosition+ ' col-3">\n';
            markup += labelText + '\n';
            markup += '<br><small>' +guidelineText+ '</small>\n';
            markup += '</label>\n';
            markup += '<div class="control-group col-9">\n';
            markup += '<div class="input-size' + horizontalSize + position + '">\n';
            
            markup += '<input type="checkbox" name="' +fieldName+ '" id="' +fieldId+ '" class="switch form-control' + verticalSize + '"' + onText + offText + '>\n';
            
            markup += '</div>\n';
            markup += '</div>\n';
            
            list.html(markup);
            list.data('controls', values);
            
            $('#form-sortable li:first-child fieldset:first-child ul').prepend(list);
            
            if( useSwitch ) {
                $( '#' + fieldId ).bootstrapSwitch();
            }
            
            $('#toggle-modal').modal('hide');

        }
        
        // submit form for validation purposes
        $('#toggle-form').submit();

    });
    
    // generic toggle button
    $('#generic-toggle-btn').click(function() {
        resetToggleForm();
        $('#toggle-modal').modal({
            width: '95%'
        });
    });
    
    // toggle button
    $('#toggle-btn').click(function() {
        resetToggleForm();
        $('#toggle-modal').modal({
            width: '95%'
        });
    });
    
});

